<script setup lang='ts'>
import { type BaseType } from './type.d'
import StyledText from './styledtext.vue'
import { reactive, ref } from 'vue';
import NotLayoutPage from '../compoments/notlayoutpage.vue'
import { type FormItemRule } from 'element-plus';
defineOptions({
  name: 'anchor_with_institutional_contracts'
})
const statusList: Array<BaseType | null> = [
  null,
  {
    text: '等待机构确认合作信息...',
    color: 'text-red-400',
    size: 'text-xl'
  },
  {
    text: '请仔细核对合作信息...',
    color: 'text-red-400',
    size: 'text-xl'
  },
  {
    text: '合作中...',
    color: 'text-emerald-500',
    size: 'text-xl'
  },
  null,
  {
    text: '已提交修改信息，等待对方确认...',
    showtip: false,
    size: 'text-sm',
    color: 'text-red-400',
  },
  {
    text: [
      {
        text: '您已向合作机构发起了',
        color: 'text-amber-500',
        size: 'text-sm',
      },
      {
        text: '解除合作',
        color: 'text-red-400',
        size: 'text-xl'
      },
      {
        text: '请求，等待对方确认中...',
        color: 'text-amber-500',
        size: 'text-sm',
      },
    ],
    showtip: false
  },
  {
    text: '合作机构发起了信息修改，请仔细核对合作信息...',
    color: 'text-amber-500',
    size: 'text-sm',
    showtip: false
  },
  {
    text: [
      {
        text: '合作机构发起了',
        color: 'text-amber-500',
        size: 'text-sm',
      },
      {
        text: '解除合作',
        color: 'text-red-400',
        size: 'text-xl'
      },
      {
        text: '请求，您是否同意解除合作？',
        color: 'text-amber-500',
        size: 'text-sm',
      },
    ],
    showtip: false
  },
]
const currentStatus = ref(4)
const agreeAgreement = ref(false)
function jump() {

}

const formModel = reactive({
  orgName: '',
  contractDuration: 1,
  seasonCardProfitRatio: 60,
  battleRefreshProfitRatio: 60,
  giftRevenueRatio: 60,
  remark: ''
})
const formRule = reactive<Partial<Record<keyof typeof formModel, FormItemRule[]>>>({
  orgName: [],

})
</script>

<template>
  <NotLayoutPage>
    <ElCard>
      <template #header>
        <h2>基础合作信息</h2>
      </template>
      <div class="w-2/5 mx-auto">
        <ElForm label-position="top">
          <ElFormItem label="签约机构" prop="orgName">
            <ElInput v-model="formModel.orgName" disabled placeholder="机构名"></ElInput>
          </ElFormItem>
          <ElFormItem label="签约时长" prop="contractDuration">
            <ElSelect v-model="formModel.contractDuration">
              <ElOption v-for="item of 5" :label="`${item}年`" :value="item"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="赛季卡收益比例" prop="seasonCardProfitRatio">
            <div class="w-4/6 mx-auto">
              <el-slider :min="10" :max="90" v-model="formModel.seasonCardProfitRatio" />
            </div>
          </ElFormItem>
          <ElFormItem label="战场刷新收益比例" prop="battleRefreshProfitRatio">
            <div class="w-4/6 mx-auto">
              <el-slider :min="10" :max="90" v-model="formModel.battleRefreshProfitRatio" />
            </div>
          </ElFormItem>
          <ElFormItem label="礼物收益比例" prop="giftRevenueRatio">
            <div class="w-4/6 mx-auto">
              <el-slider :min="10" :max="90" v-model="formModel.giftRevenueRatio" />
            </div>
          </ElFormItem>
          <ElFormItem label="个人介绍和留言" prop="remark">
            <ElInput v-model="formModel.remark" rows="5" type="textarea" placeholder="请输入您的个人介绍和留言"></ElInput>
          </ElFormItem>
        </ElForm>
        <div class="text-center text-zinc-400 text-sm" v-show="statusList.at(currentStatus)?.showtip ?? true">
          <span class="text-red-400">注意：</span>
          <span class="text-neutral-400">签约后，指挥和机构均不能单方面违约，无法单方面解除绑定关系，需在双方协商同意后才能解除绑定。</span>
        </div>
        <div class="text-center  text-sm flex items-center justify-center gap-2">
          <ElCheckbox v-model="agreeAgreement"></ElCheckbox>
          <div>
            <span>我已阅读并同意</span>
            <span class="text-blue-500 cursor-pointer">《主播入驻机构服务协议》</span>
          </div>
        </div>
        <div class="text-center text-zinc-400 text-lg">
          <StyledText :meta="statusList.at(currentStatus)"></StyledText>
        </div>

        <div class="flex justify-center">
          <ElButton :disabled="!agreeAgreement" tyle="padding:0 6rem;" type="primary">注册</ElButton>
        </div>
      </div>
    </ElCard>
  </NotLayoutPage>
</template>

<style lang='scss' scoped></style>
